<template>
  <div class="page">
    <div class="top">
      <span @click="$router.back()">
        <svg-icon icon-class="back" class="icon" />
      </span>
      <span class="center">记录</span>
    </div>
    <div class="nav">
      <van-tabs swipeable @click="menuChange" @change="menuChange">
        <van-tab v-for="(item, index) in tabs" :key="index" :title="item.title">
          <v-list :curIndex="curIndex" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import vList from "./components/List";
export default {
  data() {
    return {
      tabs: [
        { id: 1, title: "待处理", name: "pending" },
        { id: 2, title: "冻结中", name: "freeze" },
        { id: 3, title: "已完成", name: "completed" }
      ],
      curIndex: 1
    };
  },
  components: { vList },
  methods: {
    menuChange(index) {
      // 重新渲染数据列表
      console.log(this.tabs[index].id);
    }
  }
};
</script>
